<template>
	<view class="certmain">
		<uni-nav-bar shadow title="" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#f8f8f8" :shadow="false" left-icon="left">
			<view class="input-view" style="background:#FFFFFF;width:2200rpx;">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input style="background:#FFFFFF;" confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
					@input="onInput"/>
			</view>
		</uni-nav-bar>
		<view class="container" v-if="keyWord==''">
			<view class="teainfo" v-for="(i,index) in AllList" :key="index">
				<view class="teatitle">
					<text class="t1">{{i.name}}</text>
					<text class="t2" v-show="i.study.length>0" @click="listMore(i)">更多></text>
				</view>
				<view class="teacon" v-show="i.study.length>0">
					<view class="tealeft" v-for="(item,n) in i.study" :key="n" @click="getDeatil(item)">
						<view class="timg">
							<image :src="item.image" mode=""></image>
						</view>
						<text class="tt1">{{item.name}}</text>
						<view class="tinfo">
							<view>
								<text class="yan" style="width: 24rpx; margin-right: 4rpx;">
									<image style="width: 24rpx;" src="@/static/images/index/yan.png" mode=""></image>
								</text>
								<text>{{item.show_number}}</text>
							</view>
							<text @click.stop="wanlShare(item)" class="san">
									<image src="@/static/images/index/san.png" mode="">
									</image>
								</text>
							
						</view>
					</view>
				</view>
				<view v-show="i.study.length==0" style="text-align: center;  margin: 20rpx;" class="">
					暂无内容
				</view>
			</view>
		</view>
		
		<view class="container" v-else>
			<view class="teainfo" >
				<view class="teacon" >
					<view class="tealeft"  v-for="(item,index) in AllList" :key="index" @click="getDeatil(item)">
						<view class="timg">
							<image :src="item.image" mode=""></image>
						</view>
						<text class="tt1">{{item.name}}</text>
						<view class="tinfo">
							<view>
								<text class="yan" style="width: 24rpx; margin-right: 4rpx;">
									<image style="width: 24rpx;" src="@/static/images/index/yan.png" mode=""></image>
								</text>
								<text>{{item.show_number}}</text>
							</view>
							<text @click.stop="wanlShare(item)" class="san">
									<image src="@/static/images/index/san.png" mode="">
									</image>
								</text>
							
						</view>
					</view>
				</view>
				
			</view>
			<view v-show="AllList.length==0" style="text-align: center;width: 100%;line-height: 100px;" class="">
				暂无内容
			</view>
		</view>
		
		<shopro-share v-model="showShare" :posterInfo="posterInfo" :posterType="''"></shopro-share>
	</view>
</template>

<script>
import jssdk from '@/common/libs/jssdk';
import shoproShare from '@/components/shopro-share/shopro-share';
import share from '@/shopro/share/index.js'
	export default {
		data() {
			return {
				username: '',
				idcard: '',
				AllList: [],
				showShare:false,
				posterInfo:{},
				keyWord:''
			}
		},
		onReady() {
			
			this.cx()
		},
		onUnload() {
			share.setShareInfo();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onInput(e) {
				this.keyWord = ''
				this.keyWord = e.target.value
				if (this.keyWord == '') {
					this.cx()
				} else {
					this.cxs()
				}
			},
			cx() {
				this.$api.post({
					url: '/study/firstCategory',
					success: res => {
						console.log(res);
						this.AllList = res.list;

					},
					fail: error => {
						console.log(error)
					}
				})
			},
			cxs() {
				this.$api.post({
					url: '/study/lst',
					data:{keyWord:this.keyWord},
					success: res => {
						this.AllList = res.list;
					},
					fail: error => {
						console.log(error)
					}
				})
			},
			
			listMore(object) {
				console.log(object)
				// 加密传递的对象数据
				let item = encodeURIComponent(JSON.stringify(object))
				uni.navigateTo({
					url: '/pages/teacher/FreeStudyList?item=' + item,
				})

			},
			getDeatil(object) {
				console.log(object)
				// 加密传递的对象数据
				uni.navigateTo({
					url: '/pages/teacher/FreeStudyVideo?type=study&id=' + object.id+'&name='+object.name,

				})
			},
			toJoin(item) {
				uni.navigateTo({
					url: '/pages/teacher/JoinICoperation',

				})
			},
			// 分享回调
			wanlShare(item) {
				
			// console.log(item)
			let shareId = uni.getStorageSync('userInfo').id
			let res =	share.setShareInfo({
					title: item.name,
					desc: '',
					image: item.image,
					params: {
						page: 2,
						pageId: item.id,
						shareId:shareId
					}
				});
					console.log('设置分享',res)
				// this.showShare = true;
				let link = 'https://d-yxcxh5.bigchun.com/#/pages/teacher/FreeStudyVideo?type=study&id='+item.id+'&name='+item.name+'&'+res.query
				jssdk.share({
					title:item.name,
					desc:"",
					// link:encodeURIComponent(link),
					link:link,
					imgUrl:item.image
				})
				uni.showToast({
					title:'请点击右上角进行分享',
					icon:'none'
				})
				// console.log(e)
				// if (e) {
				// 	this.$wanlshop.auth(`/pages/teacher/FreeStudy`);
				// } else {
				// 	this.modalName = null;
				// }
			}
		}
	}
</script>

<style lang="scss">
	.certmain {
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;

		/deep/.uni-nav-bar-text {
			font-size: 36rpx;
			color: #333333;
			font-weight: 800;
		}
        /deep/.uni-navbar__header-btns-left{
            width: 20px !important;
        }
        /deep/.uni-navbar__header-btns-right{
            width: 0px !important;
        }
		.container {
			.teainfo {
				padding: 0 30rpx;

				.teatitle {
					display: flex;
					justify-content: space-between;
					margin-top: 40rpx;

					.t1 {
						font-size: 32rpx;
						font-weight: bold;
					}

					.t2 {
						font-size: 20rpx;
						font-weight: 400;
						color: #777777;
					}
				}

				.teacon {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					flex-wrap: wrap;
					height: 300rpx;
					// overflow: hidden;

					.tealeft,
					.tearight {
						width: 336rpx;
						height: 300rpx;
						background: rgba(255, 255, 255, 0.39);
						box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
						opacity: 1;

						.timg {

							image {
								width: 316rpx;
								height: 176rpx;
							}

							width: 316rpx;
							height: 176rpx;
							// background-color: pink;
							margin: 0 auto;
							margin-top: 10rpx;
						}

						.tt1 {
							display: block;
							margin:0 10rpx;
							margin-top: 16rpx;
							font-size: 28rpx;
							color: #333333;
							font-weight: 400;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.tinfo {
							display: flex;
							justify-content: space-between;
							padding: 0 10rpx;
							margin-top: 14rpx;

							.yan,
							.san {
								display: inline-block;
								width: 16rpx;
								height: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.san {
								margin-left: 30rpx;
							}

							.yy {
								width: 100rpx;
								height: 36rpx;
								font-size: 22rpx;
								color: #FFFFFF;
								background: rgba(231, 186, 119, 1);
								text-align: center;
								padding: 3rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
